<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        text-decoration: none;
        
    }
    body{
        background-color: #ebecf0;
        display: flex;
        /* flex-direction: column; */
        width: 100%;
        overflow-x: hidden;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    div{
        margin: 30px;
        width: 250px;
        height: 100px;
        background: linear-gradient(145deg, #caced5, #f0f5fe);
box-shadow: 6px 6px 12px #bec3c9, -6px -6px 12px #fff;
        text-align: center;
        align-items: center;
        line-height: 100px;
    }
</style>
<body>
  
    <div><a href="" style="color: red;">手机端示例</a></div>
    <!-- <div><a href="./1/index.html">1</a></div> -->
    <div> <a href="./2/index.html">2</a></div>
    <!-- <div><a href="./3/index.html">3</a></div> -->
    <div><a href="./4（移动端卡片）/index.html">4（移动端卡片）</a></div>
    <div> <a href="./5(拖拽卡片)/index.html">5(拖拽卡片)</a></div>
    <div><a href="./6(数据大屏卡片)/card.html">6(数据大屏卡片)</a></div>
    <div><a href="./7(移动端卡片)/index.html">7(移动端卡片)</a></div>
    <div>等等等等..以后持续更新</div>
 
    
  
</body>
</html>